<template>
  <div class="order-card">
    <div class="card">
      <div class="card-content">
        <div class="card-content-left">
            <img
              :src='orderItem.rooms.roomUrl'
              alt=""
            />
        </div>
        <div class="card-content-right">
          <el-descriptions
            class="margin-top"
            title="订单信息"
            :column="3"
            border
          >
            <template slot="extra">
              <i style="color: red">{{ orderItem.status }}</i>
            </template>

            <el-descriptions-item label="房间类型">
              {{ orderItem.rooms.roomType }}
            </el-descriptions-item>

            <el-descriptions-item label="房间描述">
              {{ orderItem.rooms.description }}
            </el-descriptions-item>

            <el-descriptions-item label="房间号">
              {{ orderItem.rooms.roomNumber }}
            </el-descriptions-item>

            <el-descriptions-item label="价格">
              ￥{{ orderItem.rooms.price }}
            </el-descriptions-item>

            <el-descriptions-item label="实付款">
              <el-tag size="small" type="danger"
                >￥{{ orderItem.actuallyPrice }}</el-tag
              >
            </el-descriptions-item>

            <el-descriptions-item label="查看详情">
              <el-button size="small" @click="checkOrderDetails"
                >查看详情</el-button
              >
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-descriptions
        class="margin-top"
        :title="orderItem.rooms.roomType"
        :column="2"
      >
        <template slot="extra">
          <i style="color: red">{{ orderItem.status }}</i>
        </template>
        <el-descriptions-item label="用户名">{{
          orderItem.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          orderItem.telephone
        }}</el-descriptions-item>
        <el-descriptions-item label="房间号">{{
          orderItem.rooms.roomNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="房间价格"
          >￥{{ orderItem.rooms.price }}</el-descriptions-item
        >
        <el-descriptions-item label="房间描述" :span="2">
          <el-tag size="small">{{ orderItem.rooms.description }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="房间详情" :span="2">{{
          orderItem.rooms.typeExplain
        }}</el-descriptions-item>
        <el-descriptions-item label="入房时间" :span="2">{{
          orderItem.checkInTime
        }}</el-descriptions-item>
        <el-descriptions-item label="退房时间" :span="2">{{
          orderItem.checkOutTime
        }}</el-descriptions-item>
        <el-descriptions-item label="时间" :span="2"
          >{{ orderItem.durationDay }}天</el-descriptions-item
        >
        <el-descriptions-item label="订单号" :span="2">{{
          orderItem.orderId
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="价格">￥150</el-descriptions-item> -->
        <el-descriptions-item label="实付款">
          <el-tag type="danger">￥{{ orderItem.actuallyPrice }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <template v-if="orderItem.status == '待支付'">
          <el-button @click="cancelReserve">取消预约</el-button>
          <el-button type="primary" @click="paymentDialogVisible = true">去支付</el-button>
        </template>
      </span>
    </el-dialog>
    <!-- 支付对话框 -->
    <el-dialog
      title="支付订单"
      :visible.sync="paymentDialogVisible"
      width="30%"
    >
      <el-form :model="payForm" ref="payForm" label-width="85px" class="pay-form" :rules="payRules">
        <el-form-item label="支付方式" prop="payMethod">
          <el-select
            v-model="payForm.payMethod"
            placeholder="请选择支付方式"
            style="width: 100%"
          >
            <el-option
              label="支付宝(暂且仅支持余额支付)"
              value="alipay"
            ></el-option>
            <el-option
              label="微信支付(暂且仅支持余额支付)"
              value="wechat"
            ></el-option>
            <el-option label="余额支付" value="余额支付"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付密码" prop="payPwd">
          <el-input
            type="password"
            v-model="payForm.payPwd"
            placeholder="请输入支付密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="payOrder">支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cancelOrder, payBookingOrder } from '@/api/order'
export default {
  name: 'OrderCard',
  props: ['orderItem', 'getOrderList'],
  created () {
  },
  data () {
    return {
      paymentDialogVisible: false,
      dialogVisible: false,
      payForm: {
        orderId: this.orderItem.orderId,
        payPwd: '',
        payMethod: ''
      },
      payRules: {
        payPwd: [
          {
            required: true,
            message: '请输入支付密码',
            triggle: 'blur'
          }
        ],
        payMethod: [
          {
            required: true,
            message: '请输入选择支付方式',
            triggle: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 查看订单详情
    checkOrderDetails () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 取消订单
    cancelReserve () {
      this.cancelOrder()
      // 取消订单，不会更新
      // this.$emit('refreshData')
      this.$store.dispatch('order/getOrderListAction')
      this.dialogVisible = false
    },
    // 取消预约订单接口
    async cancelOrder () {
      const res = await cancelOrder(this.orderItem.orderId)
      this.$emit('refreshData')
      this.$message({
        type: 'success',
        message: res
      })
    },
    // 支付
    payOrder () {
      this.$refs.payForm.validate(async (value) => {
        if (value) {
          this.payBookingOrder()
          this.$store.dispatch('order/getOrderListAction')
          this.payForm.payMethod = null
          this.payForm.payPwd = null
          this.paymentDialogVisible = false
          this.dialogVisible = false
        }
      })
      // this.paymentDialogVisible = true
    },
    // 支付订单接口
    async payBookingOrder () {
      const res = await payBookingOrder(this.payForm.orderId, this.payForm.payPwd, this.payForm.payMethod)
      console.log(res)
      this.$message({
        type: 'success',
        message: res
      })
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  display: flex;
  justify-content: space-between; /* 水平间隔等分 */
  // align-items: center; /* 垂直居中 */
  width: 100%;
  height: 150px;
  border: 1px solid #909399;
  margin-bottom: 10px;
  border-radius: 10px 0 0 10px;
}
.card-content {
  width: 100%;
  height: 100%;
  display: flex;
  // border: 1px solid #909399;
}
.card-content-left {
  flex: 2;
  img {
    width: 100%;
    height: 100%;
    border-radius: 10px 0 0 10px;
  }
}
.card-content-right {
  flex: 5;
  // background-color: blue;
  display: flex;
  align-items: center;
  margin-left: 10px;
  .margin-top {
    width: 98%;
    height: 98%;
  }
  // border-radius: 10px;
}
</style>
